- Friday, October 4, 2024
Node.js addons are dynamic libraries crafted in low-level programming languages such as C, C++, or Rust, designed to be integrated into Node.js applications. These addons serve as a bridge between JavaScript and native code, enabling developers to harness system-level resources, enhance performance, and incorporate external native libraries into their JavaScript code. This integration allows for a more efficient execution of tasks that require heavy computation or direct system access. The primary reasons for utilizing Node.js addons include performance optimization, access to system resources, and the ability to integrate existing native libraries. JavaScript, while versatile, is not always the best choice for performance-critical tasks like image processing or real-time data handling. By offloading these tasks to native code, developers can achieve better efficiency. Additionally, Node.js operates within a sandboxed environment, limiting direct access to system resources. Addons circumvent this limitation by exposing low-level system calls and enabling multi-threaded operations. Furthermore, many well-established libraries are written in C/C++, and addons allow developers to leverage these without the need to rewrite them in JavaScript. To create a Node.js addon, developers typically use Node-API (N-API), which provides a stable interface for writing native code. N-API abstracts the differences between various Node.js versions and the underlying JavaScript engine, ensuring compatibility with future releases. The process of creating an addon involves several steps: implementing the core logic in a low-level language, binding it with N-API to expose native functions to JavaScript, compiling the native code into a binary file, and finally, requiring the compiled addon in a JavaScript application. A practical example of creating a Node.js addon is demonstrated through a simple string manipulation task, specifically reversing a string. The core logic is implemented in C++, where a function is defined to reverse the input string. This function is then exposed to JavaScript using N-API. The build process is configured using node-gyp, which compiles the C++ code into a .node file. Once compiled, the addon can be utilized in a Node.js application, showcasing how native code can be seamlessly integrated. In conclusion, Node.js addons offer a powerful mechanism for enhancing JavaScript applications by integrating native code. They provide significant performance benefits and access to system-level resources, making them an essential tool for developers working on performance-intensive applications, hardware interactions, or legacy library integrations.
- Friday, September 20, 2024
Bun 1.1.28 introduces experimental support for compiling and running native C code directly from JavaScript. This allows developers to utilize system libraries and APIs that are not directly accessible through JavaScript, overcoming the limitations of N-API and WebAssembly. This article goes over how Bun does it by using TinyCC for fast in-memory compilation that provides near-zero call overhead.
- Thursday, June 27, 2024
NodeSwift is a bridge between Node.js and Swift code. It makes it possible to write Swift code that talks to Node.js libraries, and vice versa. This means developers can use native macOS APIs from an Electron app, npm APIs from a Swift app, and more.
- Wednesday, July 3, 2024
Million.js is a minimalistic JavaScript compiler that improves React's performance by reducing memory usage and enhancing rendering speed through a granular approach to DOM updates. It uses optimized higher-order components called blocks to achieve these performance gains.
- Friday, May 3, 2024
This is a detailed breakdown of the Node.js Performance API, which can be used to track performance metrics, add custom metrics, and view network timing data for resources fetched by your app. It covers multiple methods of the API, such as mark(), which adds markers to the timeline, and measure(), which calculates the duration between two markers.
- Friday, August 9, 2024
Bun v1.1.22 introduces performance enhancements, bug fixes, and Node.js compatibility improvements, including faster Express execution, ES module loading, and Bun.serve() POST requests, as well as reduced memory usage and improved stack traces.
- Thursday, July 25, 2024
Node.js has added an experimental flag called --experimental-strip-types that transpiles TypeScript source code into JavaScript source code.
- Thursday, April 25, 2024
Node.js 22 contains highlights such as require()ing ES modules, a WebSocket client, updates of the V8 JavaScript engine, and more. It will enter long-term support in October. This blog post expands on the changelog for the release, adding additional context to the changes. Node.js 18 will go End-of-Life in April 2025.
- Monday, July 15, 2024
By chaining various messaging APIs in browsers and browser extensions, it's possible to achieve 'universal code execution', breaking Same Origin Policy and browser sandbox. This vulnerability allows malicious web pages to communicate with an extension's content script and then relay messages to the background script, which can further communicate with a native application on the host operating system. This means that the chain can execute arbitrary code on the victim's machine.
- Wednesday, July 31, 2024
A WebAssembly-based stack for cross-platform apps.
- Tuesday, August 20, 2024
The parallel-dom npm package offloads heavy DOM operations to parallel iframes for faster rendering. It supports both plain JavaScript and React.
- Monday, April 29, 2024
Web development started with simple HTML and CSS. Eventually, client-side JavaScript allowed for more dynamic websites. The need for SEO and performance led to the creation of server-side rendering and frameworks like Next.js. JavaScript's shortcomings led to TypeScript and Svelte. At the end of the day, the core goal of all these evolutions was to create enjoyable user experiences, so the tools being used don't matter much.
- Thursday, September 26, 2024
WebJSX is a library designed for building web applications using JSX and Web Components, emphasizing simplicity and efficiency. It provides two primary functions: `createElement`, which allows developers to create virtual DOM elements using JSX syntax, and `applyDiff`, which efficiently updates the real DOM by comparing virtual nodes. The library supports a straightforward installation process via npm, enabling developers to quickly integrate it into their projects. It fully embraces JSX syntax, allowing for the creation of virtual DOM elements and the updating of the real DOM seamlessly. For instance, a simple virtual DOM can be defined using JSX, and the `applyDiff` function can be used to render it in the actual DOM. WebJSX also facilitates the creation of custom Web Components. Developers can define custom elements by extending the `HTMLElement` class and implementing lifecycle methods such as `connectedCallback` and `attributeChangedCallback`. This allows for dynamic rendering based on attribute changes, with the ability to use JSX within the custom elements. Event handling is made easy with JSX, allowing developers to attach event listeners directly within their markup. Additionally, the library supports fragments, enabling the grouping of multiple elements without adding extra nodes to the DOM. The API includes methods for creating virtual DOM elements, applying differences to the DOM, and handling fragments. There are also advanced features like rendering suspension, which allows for batching property updates to minimize re-renders. For TypeScript users, WebJSX provides configuration options to handle JSX properly, and developers can declare custom elements to avoid TypeScript errors related to unknown HTML tags. WebJSX can be bundled with various tools, but it also supports direct module loading in web pages, making it flexible for different development environments. The library encourages community contributions, welcoming bug reports, feature suggestions, and pull requests. Overall, WebJSX is an open-source project licensed under the MIT license, aimed at simplifying the development of web applications with modern web standards.
- Wednesday, March 27, 2024
Node.js recently revamped its website. This article explains the story of how it was redesigned. The site has many converging use cases, thousands of pages, and is a daily resource to many. Developers iterated to create a revamped developer experience, clearer CI/CD feedback, and an approachable tech stack.
- Friday, July 5, 2024
Next.js needed a new bundler due to the limitations of Webpack in handling large-scale applications, particularly with the increasing use of component libraries and the rise of computationally heavy applications. The new bundler, Turbopack, aims to provide faster HMR and initial compile times, maintain compatibility with existing applications, and scale effectively for large codebases. It will also incorporate persistent caching and production optimizations.
- Thursday, May 30, 2024
WinterJS is a new high-speed JavaScript runtime built with Rust and the SpiderMonkey engine. While Bun has more comprehensive toolkit features, WinterJS focuses more on speed and WinterCG compliance, but lacks Windows and TypeScript support. While initial performance tests favor Bun, WinterJS shows potential when it is run natively.
- Wednesday, July 3, 2024
Optimizing JavaScript code for performance often involves trade-offs with readability. Careful benchmarking is necessary to identify bottlenecks and measure improvements. Common optimization techniques include avoiding string comparisons and different object shapes, minimizing the use of array and object methods, reducing indirection, and optimizing memory access patterns. Using eval() strategically and understanding the nuances of string manipulation can lead to better performance.
- Wednesday, March 20, 2024
Worker threads provide a way to create independent JavaScript execution threads that run in parallel. This post walks through an example of offloading CPU-intensive tasks to a worker thread in Node.js. Without offloading, tasks can block the event loop and prevent the server from processing other requests. The article shows an example of the server going from processing 7.3k requests to 0 tasks due to a CPU-intensive task.
- Thursday, July 4, 2024
This guide explores profiling techniques to pinpoint high CPU usage in Node.js applications. It covers using built-in profilers, Chrome DevTools, the Node Inspector API, and the perf tool. The guide also mentions continuous profiling for ongoing monitoring and explores memory leak detection.
- Thursday, August 1, 2024
The DOM allows developers to interact with and manipulate web documents as a tree of nodes using APIs like querySelector(), createElement(), and appendChild(). Efficient DOM manipulation can improve performance by preferring methods such as textContent over innerText and using insertAdjacentHTML over innerHTML. Proper memory and event management, along with performance profiling, are also necessary in performance-sensitive scenarios especially.
- Monday, June 24, 2024
Frontend build systems evolved as JavaScript codebases grew larger and developer needs became more complex. They consist of three steps: transpilation to address unsupported language features, bundling to reduce network requests, and minification to decrease file sizes. These steps are facilitated by tools like Babel, SWC, and Webpack, among others, and enhanced by developer tools like meta-frameworks, sourcemaps, hot module replacement, and monorepo tools.
- Wednesday, March 6, 2024
React 19 introduces several significant improvements designed to streamline development and boost application performance. Key features include a performance-enhancing compiler, simplified form handling with Actions, server-side rendering optimizations with Server Components, and better integration with Web Components. The update promises faster rendering, smoother user experiences, and easier development workflows.
- Wednesday, July 10, 2024
Parallel DOM makes your web apps faster by parallelizing away heavy DOM operations.
- Wednesday, April 3, 2024
Bun 1.1 is a major update that brings Windows Support, better Node.js compatibility, more APIs, faster performance, and more.
- Wednesday, April 17, 2024
To profile the CPU usage of a Node.js application, launch the application with the ‘--inspect flag' and connect to it using Chrome DevTools via ‘chrome://inspect'. Start and stop the CPU profiling using the Record button in the Performance panel of DevTools to capture how CPU time is spent during application execution.
- Monday, August 5, 2024
Deno's initial HTTP imports aimed to simplify JavaScript development by using distributed URLs instead of a centralized registry, but this approach faced issues like long URLs, cumbersome dependency management, and reliability concerns. Deno introduced Import Maps and JSR to address these problems, offering better version management and reliability while maintaining the benefits of granular, HTTP-based module loading.
- Friday, September 13, 2024
This article explains the difference between concurrency and parallelism, how they are implemented in JavaScript, and the potential pitfalls of using them in Node.js.
- Thursday, October 3, 2024
TinyJS is a lightweight JavaScript library designed to facilitate the dynamic creation of HTML elements. It streamlines the process of manipulating the Document Object Model (DOM) by allowing developers to generate standard HTML tags programmatically, apply properties, append content, and select DOM elements with ease. One of the key features of TinyJS is its ability to dynamically create HTML elements. Users can generate any standard HTML tag effortlessly, which is particularly useful for building user interfaces. The library also supports deep property assignment, enabling developers to work with nested property structures for more complex elements. Additionally, it simplifies content appending by accepting both strings and elements as child content, making it versatile for various use cases. TinyJS introduces two helper functions for DOM selection: the `$` function, which acts as a wrapper around `document.querySelector`, and the `$$()` function, which wraps `document.querySelectorAll` and returns an array of DOM elements. This allows for straightforward element selection and iteration, enhancing the overall usability of the library. To illustrate its functionality, an example is provided where a `div` element is created with specific attributes and child elements, such as an `h1` and a `p`. This demonstrates how TinyJS can be used to generate and manipulate HTML elements dynamically. For installation, users simply need to include the `tiny.js` script in their project. Once included, they can utilize any valid HTML tag as a function to create elements, assign properties, and append children to the DOM. An advanced example showcases how properties can be deeply assigned to elements, such as styling a button directly through its properties. TinyJS supports a wide range of HTML tags, including basic text elements, interactive elements, media elements, and container elements, making it a comprehensive tool for web development. The library encourages contributions from the community, asking users to open an issue before submitting a pull request. Overall, TinyJS provides a simple yet powerful utility for developers looking to enhance their web applications with dynamic HTML element creation.
- Thursday, May 9, 2024
Choosing the right Node.js version manager can streamline your workflow. This article explores various options like NVM, FNM, and Volta, highlighting their strengths and weaknesses. It concludes that Volta is the current frontrunner for its ease of use, cross-platform support, and ability to manage toolchains.
- Friday, September 13, 2024
React 19 introduces major updates like Server Components, improving performance by rendering on the server and reducing client-side JavaScript. New features include Actions for handling events and enhanced hooks like useActionState for managing form states, streamlining both server and client workflows.